<!-- src/views/WordBookList.vue -->
<template>
  <div class="word-book-list">
    <el-button type="primary" icon="ArrowLeft" @click="goBack">返回</el-button>
    <div class="word-book-section">
      <div class="learning-books">
        <h2>正在学习</h2>
        <h4 v-show="whetherEmptyArray(learningBooks)">没有记录正在学习的单词书,快去找找吧!</h4>
        <div class="books booksWrap" v-show="learningBooks != []">
          <WordBook v-for="book in learningBooks" :key="book.id" :title="book.title" :wordCount="book.wordCount" :author="book.author" @bookClick="handleBookClick(book)"/>
        </div>
      </div>
      <div class="learned-books">
        <h2>学习过的单词书</h2>
        <h4 v-show="whetherEmptyArray(learnedBooks)">没有记录</h4>
        <div class="books booksWrap">
          <WordBook v-for="book in learnedBooks" :key="book.id" :title="book.title" :wordCount="book.wordCount" :author="book.author" @bookClick="handleBookClick(book)"/>
        </div>
      </div>
    </div>
    <div class="more-books">
      <h2>更多单词书</h2>

      <h4 v-show="whetherEmptyArray(moreBooks)">没有记录</h4>
      <div class="books booksWrap" >
        <WordBook v-for="book in moreBooks" :key="book.id" :title="book.title" :wordCount="book.wordCount" :author="book.author" :createDate="book.createDate" @bookClick="handleBookClick(book)"/>
      </div>
    </div>
    <div class="paging">
          <el-pagination
      v-model:current-page="currentPage3"
      v-model:page-size="pageSize3"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="prev, pager, next, jumper"
      :total="total3"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :hide-on-single-page="true"
    />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import WordBook from '@/components/WordBook.vue';
import { httpClient } from "@/libs/http-client";
import router from "@/router";

const learningBooks = ref([]);

const learnedBooks = ref([]);

const moreBooks = ref([]);

  // 处理单词书点击事件
const handleBookClick = (book) => {
  console.log('点击了单词书：', book);
  router.push({
    path: '/wordBookDetail',
    query: {
      bookId: book.id,
      bookName: book.title,
      wordCount: book.wordCount,
      creatorId: book.creatorId,
      createDate: book.createDate
    }
  });
}

const goBack = () => {
  window.history.back();
};

// 更多单词书的分页
const currentPage3 = ref(1);
const pageSize3 = ref(10);
const size = ref('default');
const disabled = ref(false);
const background = ref(true);
const total3 = ref(0);
const handleCurrentChange = (val) => {
  console.log(`当前页: ${val}`);
  getMoreBooks();
};
const handleSizeChange = (val) => {
  console.log(`每页条数: ${val}`);
}

// 获取正在学习的单词书
const getLearningBooks = () => {
  httpClient.get('/word/getLearningWordBook')
  .then((data) => {
    learningBooks.value = [];
    data.records.forEach((book) => {
      learningBooks.value.push({
        id: book.id,
        title: book.bookName,
        wordCount: book.wordCount,
        creatorId: book.creatorId
      });
    });
  })
}

// 获取学习过的单词书
const getLearnedBooks = () => {
  httpClient.get('/word/getLearnedWordBook')
 .then((data) => {
    learnedBooks.value = [];
    data.records.forEach((book) => {
      learnedBooks.value.push({
        id: book.id,
        title: book.bookName,
        wordCount: book.wordCount,
        creatorId: book.creatorId
      })
    })
 })
}

// 获取更多单词书
const getMoreBooks = () => {
  // 清空当前数组
  moreBooks.value = [];
  httpClient.get('/word/getWordBookList', {
    params: {
      pageNum: currentPage3.value,
      pageSize: pageSize3.value
    },
  })
  .then((data) => {
    total3.value = data.total;
    data.records.forEach((book) => {
      moreBooks.value.push({
        id: book.id,
        title: book.bookName,
        wordCount: book.wordCount,
        createDate: book.createDate,
        creatorId: book.creatorId
      });
    });
  })
}

// 判断是否为空
const whetherEmptyArray = (array) => {
  if(array.length == 0)
  {
    return true;
  }
  return false;
}

// 初始化
onMounted(() => {
  getLearningBooks();
  getLearnedBooks();
  getMoreBooks();
})
</script>

<style scoped>
.word-book-list {
  padding: 20px;
}
.word-book-section {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}
.learning-books, .learned-books {

}
.more-books {
  margin-top: 20px;
}
.books {
  display: flex;
}

.booksWrap{
  flex-wrap: wrap;
}

.paging{
  display: flex;
  justify-content: center;
}
</style>
